<template>
  <div class="father">
      <h2>父组件</h2>
      <h3>a:{{ a }},b:{{ b }},c:{{ c }},d:{{ d }}</h3>
      <h3 v-if="toy">我得到了玩具:{{ toy }}</h3>
      <Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:'x',y:'y',z:'z'}" :getToy="getToy" />
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
import { ref } from 'vue'

let a=ref('1')
let b=ref('2')
let c=ref('3')
let d=ref('4')
let toy=ref('')
function getToy(grandToy:string) {
  toy.value=grandToy
}

</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>